import React from "react";
import {Card} from 'antd';

import ClassCount from './components/ClassCount'
import UseStateCount from './components/UseStateCount'
import UseEffectCount from "./components/UseEffectCount";
import UseRefCount from "./components/UseRefCount";
import UseReducerCount from "./components/UseReducerCount";
import UseMemoCount from "./components/UseMemoCount";
import UseCallbackCount from "./components/UseCallbackCount";
import CustomerHooks from "./components/CustomerHooks";

// 函数式组件使用 生命周期

const HooksDemo = () => {
    return (
        <div>
            <Card title="类式组件">
                <ClassCount/>
            </Card>
            <Card title="函数式组件 useState">
                <UseStateCount/>
            </Card>
            <Card title="函数式组件 useEffect">
                <UseEffectCount/>
            </Card>
            <Card title="函数式组件 useRef">
                <UseRefCount/>
            </Card>
            <Card title="函数式组件 useReducer">
                <UseReducerCount/>
            </Card>
            <Card title="函数式组件 useMemo">
                <UseMemoCount/>
            </Card>
            <Card title="函数式组件 useCallback">
                <UseCallbackCount/>
            </Card>
            <Card title="函数式组件 自定义Hooks">
                <CustomerHooks/>
            </Card>
        </div>
    )
}

export default HooksDemo;
